<template>
  <div class="container transac-monitor-submit pb70">
    <p class="bread">
      <a href="#/">首页</a> >
      <a href="#/transac-monitor-list" class="font-s-18">交易监控服务</a> >
      <a href="#/transac-monitor-list" class="font-s-16">申请服务</a>
    </p>
    <div class="content">
      <div class="box bg-c-fff box-border">
        <h3 class="pl40 line-h40">客户信息</h3>
        <ul class="information">
          <li><span>企业名称：</span>{{account}}</li>
          <li><span>地址：</span>{{address}}</li>
          <li><span>电话：</span>{{phone}}</li>
          <li><span>邮箱：</span>{{email}}</li>
        </ul>
      </div>
      <div class="box bg-c-fff detailed box-border">
        <ul class="fix tc">
          <li>申请企业服务信息</li>
          <li>名称</li>
          <li>时间</li>
          <li>次数</li>
          <li>金额</li>
        </ul>
        <ul class="fix tc">
          <li class="son-center">
            <img src="../assets/day.png" alt="">
          </li>
          <li>{{this.monitorDetail.name}}</li>
          <li>{{this.monitorDetail.dueTime|dayFilter}}</li>
          <li>{{this.monitorDetail.number|numFilter}}</li>
          <li>{{this.monitorDetail.charge|moneyFilter}}</li>
        </ul>
        </table>
      </div>
      <div class="box bg-c-fff">
        <h3 class="pl40 line-h40">发票信息</h3>
        <div class="pl40 line-h40">
          <input type="checkbox" id="invoice" class="vm cup" @change="onShow" ref="invoiceInput" />
          <label for="invoice" class="cup">我要开发票</label>
        </div>
      </div>
      <div class="box bg-c-fff">
        <div class="pl40 line-h40">
          <input type="checkbox" class="vm" v-model="check" />
          <span>我已阅读并同意<a href="#/rule" target="_blank" class="font-c-013">《交易监控服务规则》</a></span>
        </div>
      </div>
      <div class="box bg-c-fff fix">
        <div class="flo-right payment tc">
          <p>应付金额：<span>{{this.monitorDetail.charge|moneyFilter}}</span></p>
          <button type="button" class="blue-button xl-btn-css db auto" @click="onPay">去付款</button>
        </div>
      </div>
    </div>
    <vodal :show="show" animation="zoom" :width="460" :height="630" @hide="show = false">
      <form @submit.prevent="onBillSubmit" class="invoice-form">
        <h2>发票信息</h2>
        <div class="tab">
          <div>
            <span class="dib">发票类型</span>
            <ul class="dib tab-title">
              <li class="dib tc cup" @click="tabShow(1)" :class="{active:activeIndex === 1}">纸质普通发票</li>
              <li class="dib tc cup" @click="tabShow(2)" :class="{active:activeIndex === 2}">电子普通发票</li>
            </ul>
          </div>
          <div class="tab-inner">
            <div class="tab-con" v-show="activeIndex === 1">
              <ul>
                <li><span class="dib">发票抬头</span>
                  <input type="text" v-model="header">
                </li>
                <li><span class="dib">纳税人识别号</span>
                  <input type="text" v-model="taxpayerNumber">
                  <p>我们为您提供发票邮寄服务，邮费到付，请填写邮寄地址</p>
                </li>
                <li><span class="dib">联系人</span>
                  <input type="text" v-model="contacts">
                </li>
                <li><span class="dib">联系电话</span>
                  <input type="text" v-model="billPhone">
                </li>
                <li><span class="dib">配送地址</span>
                  <address-select :isActive="isActive" ref="addressData"></address-select>
                </li>
                <li><span class="dib vt">详细地址</span>
                  <textarea v-model="detailAdd"></textarea>
                </li>
              </ul>
            </div>
            <div class="tab-con" v-show="activeIndex === 2">
              <ul>
                <li><span class="dib">发票抬头</span>
                  <input type="text" v-model="header">
                </li>
                <li><span class="dib">纳税人识别号</span>
                  <input type="text" v-model="taxpayerNumber">
                  <p>请填写电子发票收票信息</p>
                </li>
                <li><span class="dib">收票人手机</span>
                  <input type="text" v-model="billPhone">
                </li>
                <li><span class="dib">收票人邮箱</span>
                  <input type="text" v-model="billEmail">
                </li>
              </ul>
            </div>
          </div>
          <div class="invoice-ps">
            <h3>发票需知</h3>
            <p>1. 发票内容为服务费；</p>
            <p>2. 发票金额为用户实际支付的金额；</p>
            <p>3. 纸质发票会在支付成功后3个工作日单独寄出，邮费到付；</p>
            <p>4. 电子发票可在支付成功，由工作人员发送到您的邮箱；</p>
            <p>5. 单笔订单只支持开具一种类型的发票，如需增值专用发票请联系</p>
            客服处理。</p>
          </div>
        </div>
        <div class="tc auto invoice-btn">
          <button type="submit" class="blue-button small-btn-css">确认</button>
          <button type="button" class="white-button small-btn-css" @click="cancel">取消</button>
        </div>
      </form>
    </vodal>
    <vodal :show="payTypeShow" animation="zoom" :width="1200" :height="415" @hide="payTypeShow = false">
      <div class="pay-type-content  box-border fix bg-c-fff">
        <h3>选择付款方式<span class="flo-right">应付金额：<i>{{this.monitorDetail.charge|moneyFilter}}</i></span></h3>
        <div class="box">
          <p>订单号：{{id}}</p>
          <ul class="auto tc">
            <li class="dib rel" @click="paymentShow(1)">
              <input type="radio" name="payment-method" id="wx">
              <label for="wx" class="wx cup"></label>
              <span class="db abs">
              <i class="db" v-show="isChoice===1"></i>
            </span>
            </li>
            <li class="dib rel" @click="paymentShow(2)">
              <input type="radio" name="payment-method" id="ali">
              <label for="ali" class="ali cup"></label>
              <span class="db abs">
              <i class="db"v-show="isChoice===2"></i>
            </span>
            </li>
            <li class="dib rel" @click="paymentShow(3)">
              <input type="radio" name="payment-method" id="yl">
              <label for="yl" class="yl cup"></label>
              <span class="db abs">
              <i class="db" v-show="isChoice===3"></i>
            </span>
            </li>
          </ul>
        </div>
        <div class="time-button fix">
          <div class="flo-right">
            <span></span>
            <button type="button" class="blue-button db" @click="onSubmit">立即付款</button>
          </div>
        </div>
      </div>
    </vodal>
    <vodal :show="QRCodeShow" animation="zoom" :width="380" :height="429" :closeButton='false'>
      <div class="vodal-code">
        <p class="tc">请用{{payTypeName}}扫描二维码支付</p>
        <p class="money tc">应付金额：<span>{{this.monitorDetail.charge|moneyFilter}}</span></p>
        <div id="qrcode"></div>
        <p class="tc time">剩余时间:{{time}}</p>
        <div class="tc">
          <button type="button" class="blue-button dib" v-bind:class="{acticve:noClick}" @click="payFinsh">支付完成</button>
          <button type="button" class="white-button dib" @click="payEnding">取消支付</button>
        </div>
      </div>
    </vodal>
    <vodal :show="waitShow" animation="zoom" :width="380" :height="76" :closeButton='false'>
      <div class="waitText">
        <p class="tc">请等待生成二维码...</p>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import QRCode from '../lib/qrcode.js'
import AddressSelect from '../components/Address/Address'
import Vodal from 'vodal'
export default {
  components: {
    Vodal,
    AddressSelect
  },
  data() {
    return {
      monitorDetail: [],
      show: false,
      activeIndex: 1,
      isActive: true,
      hasInvoice: true,
      check: false,
      header: '',
      taxpayerNumber: '',
      contacts: '',
      billPhone: '',
      billEmail: '',
      detailAdd: '',
      bill: '',
      invoiceId: '',
      payTypeShow: false,
      isChoice: 1,
      noClick: false,
      qrcode: null,
      time: '',
      QRCodeShow: false,
      waitShow: false,
      id: '',
      timeData: 900,
      minute: '',
      second: ''
    }
  },
  mounted() {
    this.$http.get('/transactionMonitor/read/detail', {
      params: {
        id: this.$route.query.id
      }
    }).then((data) => {
      if (data.data.httpCode === 200) {
        this.monitorDetail = data.data.data
      } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch((err) => {
      console.log(err)
    })
    this.qrcode = new QRCode(document.getElementById('qrcode'), {
      width: 220,
      height: 220
    })
  },
  methods: {
    onShow(e) {
      if (!this.$refs.invoiceInput.checked) {} else {
        this.show = true
        this.$refs.invoiceInput.checked = ''
        this.bill = 0
      }
    },
    tabShow(index) {
      this.activeIndex = index
    },
    onBillSubmit() {
      if (!this.header) {
        this.$toasted.show('发票抬头不能为空')
        return
      }
      var conReg = /^[\u4E00-\u9FA5A-Za-z]+$/
      if (!this.taxpayerNumber) {
        this.$toasted.show('纳税人识别号不能为空')
        return
      }
      if (conReg.test(this.taxpayerNumber)) {
        this.$toasted.show('纳税人识别号只能为数字')
        return
      }
      if (!this.contacts && this.activeIndex === 1) {
        this.$toasted.show('联系人不能为空')
        return
      }
      if (!conReg.test(this.contacts) && this.activeIndex === 1) {
        this.$toasted.show('联系人只能输入中文和英文')
        return
      }
      var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!phoneReg.test(this.billPhone)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (!this.$refs.addressData.province && this.activeIndex === 1) {
        this.$toasted.show('配送地址省不能为空')
        return
      }
      if (!this.$refs.addressData.state && this.activeIndex === 1) {
        this.$toasted.show('配送地址市不能为空')
        return
      }
      if (!this.$refs.addressData.area && this.activeIndex === 1) {
        this.$toasted.show('配送地址区/县不能为空')
        return
      }
      if (!this.detailAdd && this.activeIndex === 1) {
        this.$toasted.show('详细地址不能为空')
        return
      }
      if (!this.billEmail && this.activeIndex === 2) {
        this.$toasted.show('收票人邮箱不能为空')
        return
      }
      var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!emailReg.test(this.billEmail) && this.activeIndex === 2) {
        this.$toasted.show('请输入有效地邮箱')
        return
      }
      this.$http.post('/transactionMonitorOrder/bill', {
        type: this.activeIndex,
        header: this.header,
        taxpayerNumber: this.taxpayerNumber,
        contacts: this.contacts,
        phone: this.billPhone,
        email: this.billEmail,
        address: this.$refs.addressData.province + ',' + this.$refs.addressData.state + ',' + this.$refs.addressData.area,
        detailAdd: this.detailAdd
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('保存成功！')
          this.$refs.invoiceInput.checked = true
          this.bill = 1
          this.show = false
          this.invoiceId = data.data.data.id
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    cancel() {
      this.show = false
      this.header = ''
      this.taxpayerNumber = ''
      this.contacts = ''
      this.billPhone = ''
      this.billEmail = ''
      this.detailAdd = ''
      this.bill = ''
      this.invoiceI = ''
      this.$refs.addressData.province = ''
      this.$refs.addressData.state = ''
      this.$refs.addressData.area = ''
    },
    onPay() {
      if (this.check) {
        this.payTypeShow = true
      } else {
        this.$toasted.show('请您阅读并同意《交易监控服务规则》')
      }
    },
    paymentShow(index) {
      this.isChoice = index
      return
    },
    dataTime() {
      var timeFun = setInterval(() => {
        this.timeData--
          var minute = parseInt(this.timeData / 60)
        var second = parseInt(this.timeData % 60)
        this.time = minute + ' 分 ' + second + ' 秒'
        if (this.timeData < 1) {
          clearInterval(timeFun)
          this.time = '0 分 0 秒'
          this.noClick = true
        }
      }, 1000)
    },
    onSubmit() {
      this.waitShow = true
      this.$http.post('/orderPay/unified/toPay', {
        productId: this.$route.query.id,
        orderPrice: this.monitorDetail.charge,
        payment: this.isChoice,
        type: 3,
        productInfo: this.monitorDetail.name,
        bill: this.bill,
        invoiceId: this.invoiceId
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.dataTime()
          this.qrcode.clear()
          this.qrcode.makeCode(data.data.data.qrUrl)
          this.trxid = data.data.data.trxid
          this.orderPayId = data.data.data.id
          this.waitShow = false
          this.QRCodeShow = true
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    payFinsh() {
      if (this.timeData <= 0) {
        this.$toasted.show('订单已过时，请重新开始')
        this.$router.push('/transac-monitor-list')
        return
      }
      this.$http.post('/orderPay/callback', {
        id: this.orderPayId,
        trxid: this.trxid
      }).then(data => {
        if (data.data.httpCode === 200) {
          if (data.data.data === 3) {
            this.$toasted.show('支付成功')
            this.$router.push('/transac-monitor-list')
          }
        } else {
          if (data.data.msg === '2008') {
            this.$toasted.show('交易处理中')
          }
          if (data.data.msg === '0000') {
            this.$toasted.show('交易成功')
            this.$router.push('/transac-monitor-list')
          }
          if (data.data.msg === '3045' || data.data.msg === '3088') {
            this.$toasted.show('交易处理中')
          }
          if (data.data.msg === '3999') {
            this.$toasted.show('交易失败')
          }
          if (data.data.msg === '3008') {
            this.$toasted.show('余额不足')
          }
          if (data.data.msg === '3050') {
            this.$toasted.show('交易已撤销')
          }
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    payEnding() {
      this.$router.push('/transac-monitor-list')
      this.$toasted.show('订单已取消!')
    }
  },
  computed: {
    account() {
      return this.$store.state.userInfo.memberBusniess.account
    },
    address() {
      return this.$store.state.userInfo.memberBusniess.address
    },
    phone() {
      return this.$store.state.userInfo.memberBusniess.phone
    },
    email() {
      return this.$store.state.userInfo.memberBusniess.email
    },
    payTypeName() {
      if (this.isChoice === 1) {
        return '微信'
      } else if (this.isChoice === 2) {
        return '支付宝'
      }
    }
  },
  filters: {
    moneyFilter(money) {
      return '￥' + (money / 100).toFixed(2) + '元'
    },
    dayFilter(day) {
      if (day <= 0) {
        return '不限时间'
      } else {
        return day + '天'
      }
    },
    numFilter(number) {
      if (number <= 0) {
        return '不限次数'
      } else {
        return number + '次'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.box-border {
  border: 1px solid #ddd;
}

.content .box {
  margin-bottom: 20px;
}

.line-h40 {
  line-height: 40px;
}

.content .box h3 {
  border-bottom: 1px solid #dddddd;
  color: #a5a5a5;
}

.content .box ul.information {
  line-height: 30px;
  padding: 16px 40px;
}

.content .box ul li span {
  width: 70px;
  text-align: right;
  display: inline-block;
}

.content .box.detailed ul li {
  float: left;
}

.content .box.detailed ul:nth-of-type(1) {
  border-bottom: 1px solid #ddd;
  line-height: 40px;
  color: #a5a5a5;
}

.content .box.detailed ul:nth-of-type(2) li {
  line-height: 160px;
  height: 160px;
}

.content .box.detailed ul li:nth-of-type(1) {
  width: 211px;
}

.content .box.detailed ul li:nth-of-type(2) {
  width: 250px;
}

.content .box.detailed ul li:nth-of-type(3) {
  width: 200px;
}

.content .box.detailed ul li:nth-of-type(4) {
  width: 200px;
}

.content .box.detailed ul li:nth-of-type(5) {
  width: 200px;
}

.content .box.detailed ul li img {
  margin-top: 30px;
}

.payment {
  width: 240px;
  padding: 15px 0;
}

.payment p {
  color: #282828;
  line-height: 35px;
}

.payment p span {
  color: #ec1818;
  font-size: 18px;
}

.payment a {
  width: 160px;
  line-height: 50px;
  height: 50px;
  font-size: 18px;
}

.pl40 {
  padding-left: 40px;
}

.invoice-form h2 {
  background-color: #d8e7ff;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  padding-left: 30px;
}

.tab {
  line-height: 30px;
  padding: 22px 0 0 30px;
}

.tab span {
  width: 95px;
}

.tab-title,
.tab-inner li {
  margin-bottom: 10px;
}

.tab-title {
  margin-left: 4px;
}

.tab-title li {
  width: 140px;
  background-color: #ddd;
  margin-left: -4px;
}

.tab-title li.active {
  background-color: #01378c;
  color: #fff;
}

.tab input,
.tab textarea {
  width: 280px;
  border: 1px solid #dddddd;
  line-height: 30px;
  height: 30px;
  padding: 0 10px;
}

.tab input {
  height: 30px;
}

.tab textarea {
  height: 60px;
}

.tab-inner {
  height: 314px;
}

.tab-inner p {
  color: #a5a5a5;
  font-size: 12px;
}

.tab-inner select {
  width: 90.5px;
  padding: 0 5px;
}

.invoice-ps {
  line-height: 18px;
  color: #282828;
}

.invoice-ps h3 {
  padding-bottom: 7px;
}

.invoice-btn button {
  margin: 13px 30px;
}

.content h3 {
  color: #a5a5a5;
  line-height: 40px;
  font-size: 14px;
}

.pay-type-content {
  margin: 35px;
  border: 1px solid #ddd;
}

.pay-type-content h3 {
  padding: 15px 40px;
}

.pay-type-content .box {
  padding: 0px 40px;
}

.pay-type-content h3,
.pay-type-content .box {
  color: #a5a5a5;
  border-bottom: 1px solid #dddddd;
}

.pay-type-content h3 span i {
  color: #ec1818;
  font-size: 18px;
}

.pay-type-content .box p {
  line-height: 37px;
}

.pay-type-content .box li {
  margin: 0 15px 35px 15px;
}

.pay-type-content .box li input {
  opacity: 0;
  filter: alpha(opacity=0);
}

.pay-type-content .box li label {
  box-shadow: -1px -1px 18px #f0f2fa;
  width: 300px;
  height: 120px;
  display: block;
}

.yl {
  background: url(../assets/cxk.jpg) center no-repeat;
}

.wx {
  background: url(../assets/wx.jpg) center no-repeat;
}

.ali {
  background: url(../assets/ali.jpg) center no-repeat;
}

.pay-type-content .box li span,
.pay-type-content .box li i {
  border-radius: 100%;
}

.pay-type-content .box li span {
  left: 15px;
  top: 68px;
  border: 1px solid #989898;
  width: 20px;
  height: 20px;
}

.pay-type-content .box li i {
  width: 14px;
  height: 14px;
  background-color: #282828;
  margin-top: 2px;
  margin-left: 2px;
}

.time-button {
  padding: 13px 40px 13px 0;
  color: #a5a5a5;
}

.time-button button {
  width: 160px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  margin-left: 20px;
}

button.acticve {
  background-color: #ddd;
  border-color: #ddd;
}

.waitText p.tc {
  font-size: 23px;
  line-height: 76px;
}

.vodal-code {
  padding: 25px;
}

.vodal-code p.tc {
  font-size: 23px;
}

.vodal-code p.money {
  line-height: 42px;
  margin-top: 10px;
}

.vodal-code p.money span {
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
}

.vodal-code p.time {
  font-size: 15px;
  line-height: 35px;
}

#qrcode {
  margin: 0 auto;
  display: block;
  width: 220px;
  height: 220px;
}

.vodal-code button {
  width: 80px;
  height: 35px;
  line-height: 35px;
  margin: 7px 27px;
}

</style>
<style type="text/css">
.vodal-dialog {
  padding: 0;
}

.vodal-close {
  top: 12px;
}

.vodal-close:before,
.vodal-close:after {
  background: #01378c;
  border-radius: 0;
}

</style>
